<template>
  <a-drawer v-if="settings && Object.keys(settings).length>0"
            title="个性化设置"
            placement="right"
            :closable="false"
            :visible="visible"
            width="300"
            @close="onClose">

    <!-- <template #handle>
      <div class="personal-setting-handle"
           @click="visible=!visible">
        <a-icon v-if="!visible"
                type="setting" />
        <a-icon v-else
                type="arrow-right" />
      </div>
    </template> -->

    <div>
      <div class="ant-pro-setting-drawer-title">导航菜单样式</div>
      <a-space>
        <a-tooltip>
          <template slot="title">
            浅色
          </template>
          <div class="themes-page-style"
               @click="change('navTheme', 'light')">
            <img src="../assets/icons/light-style.png">
            <div v-if="$store.getTheme('navTheme')=='light'">
              <a-icon type="check"
                      :style="{
                        color: $store.getTheme('color')
                      }" />
            </div>
          </div>
        </a-tooltip>
        <a-tooltip>
          <template slot="title">
            暗黑
          </template>
          <div class="themes-page-style"
               @click="change('navTheme', 'dark')">
            <img src="../assets/icons/dark-style.png">
            <div v-if="$store.getTheme('navTheme')=='dark'">
              <a-icon type="check"
                      :style="{
                        color: $store.getTheme('color')
                      }" />
            </div>
          </div>
        </a-tooltip>
      </a-space>
    </div>

    <a-divider />

    <div>
      <div class="ant-pro-setting-drawer-title">字体大小</div>
      <a-radio-group v-model="settings.fontSize"
                     @change="changeFontSize"
                     class="themes-font-size">
        <a-radio value="12px"
                 style="font-size:12px; display:block; margin-bottom: 6px;">
          小 - 这是一段文字示例
        </a-radio>
        <a-radio value="14px"
                 style="font-size:14px; display:block; margin-bottom: 6px;">
          标准 - 这是一段文字示例
        </a-radio>
        <a-radio value="16px"
                 style="font-size:16px; display:block; margin-bottom: 6px;">
          大 - 这是一段文字示例
        </a-radio>
        <a-radio value="18px"
                 style="font-size:18px; display:block; margin-bottom: 6px;">
          特大 - 这是一段文字示例
        </a-radio>
      </a-radio-group>
    </div>

    <a-divider />

    <div>
      <div class="ant-pro-setting-drawer-title">导航菜单布局</div>
      <a-space>
        <a-tooltip>
          <template slot="title">
            侧边布局
          </template>
          <div class="themes-page-style"
               @click="change('navPosition', 'side')">
            <img src="../assets/icons/nav-side.png">
            <div v-if="$store.getTheme('navPosition')=='side'">
              <a-icon type="check"
                      :style="{
                        color: $store.getTheme('color')
                      }" />
            </div>
          </div>
        </a-tooltip>
        <a-tooltip>
          <template slot="title">
            顶部布局
          </template>
          <div class="themes-page-style"
               @click="change('navPosition', 'top')">
            <img src="../assets/icons/nav-top.png">
            <div v-if="$store.getTheme('navPosition')=='top'">
              <a-icon type="check"
                      :style="{ color: $store.getTheme('color') }" />
            </div>
          </div>
        </a-tooltip>
      </a-space>
    </div>

    <a-divider />

    <div>
      <div class="ant-pro-setting-drawer-title">主题色</div>
      <div>
        <a-tooltip v-for="color in colorList"
                   :key="color.value">
          <template slot="title">
            {{ color.name }}
          </template>
          <div class="themes-color-item"
               @click="changePrimaryColor(color.value)"
               :style="{ backgroundColor: color.value }">
            <a-icon v-if="settings.color==color.value"
                    type="check" />
          </div>
        </a-tooltip>
      </div>
    </div>

    <a-divider />

    <div class="ant-pro-setting-drawer-title">打开方式</div>
    <div class="x-block-checkbox">
      <a-space>
        <a-tooltip>
          <template slot="title">
            单页显示
          </template>
          <div class="x-block-checkbox-item"
               @click="change('page', 'single')">
            <img src="../assets/icons/singletab.png">
            <div v-if="settings.page=='single'">
              <a-icon type="check"
                      class="x-block-checkbox-selected" />
            </div>
          </div>
        </a-tooltip>
        <a-tooltip>
          <template slot="title">
            多标签
          </template>
          <div class="x-block-checkbox-item"
               @click="change('page', 'multi')">
            <img src="../assets/icons/tabs.png">
            <div v-if="settings.page=='multi'">
              <a-icon type="check"
                      class="x-block-checkbox-selected" />
            </div>
          </div>
        </a-tooltip>
      </a-space>
    </div>
    <a-row v-if="settings.page=='multi'"
           :gutter="[16,16]">
      <a-col :span="18">始终在新标签中打开链接</a-col>
      <a-col :span="6">
        <a-switch :defaultChecked="settings.newTab=='always'"
                  size="small"
                  @change="change('newTab', $event)" />
      </a-col>
    </a-row>

    <a-divider />

    <a-row>
      <a-col :span="10">
        <div class="ant-pro-setting-drawer-title">内容区宽度</div>
      </a-col>
      <a-col :span="10">
        <a-select :value="$store.getTheme('contentWidth')"
                  style="width: 100%"
                  size="small"
                  @change="change('contentWidth', $event)">
          <a-select-option value="fixed">
            固定宽度
          </a-select-option>
          <a-select-option value="fluid">
            铺满屏幕
          </a-select-option>
        </a-select>
      </a-col>
    </a-row>

  </a-drawer>
</template>

<script>
/**
 * 个性化设置
 */
import { colorList } from '../themes/index'
import { save } from '../api/themes/index'

export default {
  data () {
    return {
      colorList,
      settings: Object.assign({
        page: 'single'
      }, this.$store.getThemes()),
      visible: false
    }
  },
  methods: {
    show () {
      this.visible = true
    },
    onClose () {
      this.visible = false
    },
    changePrimaryColor (value) {
      window.less?.modifyVars?.({
        '@primary-color': value
      })
      this.change('color', value)
    },
    changeFontSize () {
      document.documentElement.style.setProperty('font-size', this.settings.fontSize)
      this.change('fontSize', this.settings.fontSize)
    },
    change (key, value) {
      if (key == 'newTab') {
        value = value ? 'always' : 'default'
      }
      this.$set(this.settings, key, value)
      this.$store.setThemes(this.settings)
      this.$emit('change', { key, value }, this.settings)
      // 保存主题
      save(this.settings).then(response => { })
    }
  }
}
</script>

<style lang="less" scoped>
.personal-setting-handle {
  position: absolute;
  top: 200px;
  right: 300px;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: var(--font-size-16);
  text-align: center;
  background: #1890ff;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  pointer-events: auto;
  color: #fff;
}
.x-block-checkbox {
  display: flex;
  flex-flow: wrap;
  .x-block-checkbox-item {
    display: inline-block;
    position: relative;
    border-radius: 4px;
    width: 48px;
    cursor: pointer;
    > img {
      width: 100%;
    }
    > div {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      color: #1890ff;
      font-weight: bold;
      font-size: var(--font-size-def);
      text-align: center;
      align-items: center;
      justify-items: center;
      display: inline-flex;
      align-content: center;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
    }
  }
}
.ant-pro-setting-drawer-title {
  margin-bottom: 12px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  line-height: 22px;
}
.themes-page-style {
  position: relative;
  > div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 15px;
    padding-left: 24px;
    color: #1890ff;
    font-weight: bold;
    font-size: 14px;
  }
}
.themes-color-item {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  vertical-align: top;
  margin-right: 8px;
}
.themes-color-item:last-child {
  margin-right: 0;
}
</style>